<template>
    <div class="outDiv">
        <div style="margin-top: 15px;width: 100%;" class="display-row">
            <div class="filelabel row-left"><p>认领名称:</p></div>
            <div class="titleinput row-right">
                <p>{{paperName}}</p>
            </div>
        </div>
        <div style="margin-top: 15px;width: 100%;margin-bottom: 20px" class="display-row">
            <div class="filelabel row-left"><p>认领范围:</p></div>
            <div class="titleinput row-right">
                <p>{{paperRange}}</p>
            </div>
        </div>
        <el-card style="overflow-x: auto; shadow:never">
            <div style="display: table; padding:1px 10px 15px; min-width: 2500px ">
                <div style="display: table-row">
                    <div class="tableTitle" style="width: 1rem">
                        序号
                    </div>
                    <div class="tableTitle" >
                        检索类别
                    </div>
                    <div class="tableTitle">
                        作者
                    </div>
                    <div class="tableTitle">
                        题目
                    </div>
                    <div class="tableTitle">
                        刊名
                    </div>
                    <div class="tableTitle">
                        出版年
                    </div>
                    <div class="tableTitle">
                        issn
                    </div>
                    <div class="tableTitle">
                        最终分区
                    </div>
                    <div class="tableTitle">
                        最终影响因子
                    </div>
                    <div class="tableTitle">
                        重复说明
                    </div>
                    <div class="tableTitle">
                        第一作者姓名
                    </div>
                    <div class="tableTitle">
                        第一作者身份
                    </div>
                </div>
                <div :class="{'tablerow':true, 'grayLine': (index % 2 === 0)}" style="display: table-row;" v-if="dataList.length > 0" v-for="(item,index) in dataList" :key="item.id" >
                    <div class="tableCell" style="width: 2rem">
                        {{index+1}}
                    </div>
                    <div class="tableCell">
                        {{item.c1}}
                    </div>
                    <div class="tableCell" style="width: 10rem">
                        {{item.c2}}
                    </div>
                    <div class="tableCell" style="width: 15rem">
                        {{item.c1}}
                    </div>
                    <div class="tableCell" style="width: 10rem">
                        {{item.c1}}
                    </div>
                    <div class="tableCell" style="width: 4rem">
                        {{item.c1}}
                    </div>
                    <div class="tableCell">
                        {{item.c1}}
                    </div>
                    <div class="tableCell">
                        {{item.c1}}
                    </div>
                    <div class="tableCell">
                        {{item.c1}}
                    </div>
                    <div class="tableCell">
                        {{item.c1}}
                    </div>
                    <div class="tableCell">
                        {{item.c1}}
                    </div>
                    <div class="tableCell">
                        {{item.c1}}
                    </div>
                </div>
            </div>
        </el-card>

        <div v-if="!inMain" class="paginaClass">
            <el-pagination
                    @current-change=currentChange
                    :current-page.sync=currentPage
                    :page-size="size"
                    layout="prev, pager, next, jumper"
                    :total=total
                    style="margin-right: 40px">
            </el-pagination>
            <div style="padding-right: 15px" >
                <el-button type="primary" size="mini" @click="finishrenling">结束认领</el-button>
            </div>
            <div style="padding-right: 15px" >
                <el-button type="primary" size="mini" @click="saveedit">保存编辑</el-button>
            </div>
            <div style="padding-right: 15px" >
                <el-button type="primary" size="mini" @click="resultout">结果导出</el-button>
            </div>
        </div>
    </div>

</template>

<script>
    import Cookies from 'js-cookie'
    import API from '../../api'
    import PRO from '~/api/API_PRO'
    export default {
        name: "paper_detail",
        props:{
            /**
             *  3   信息征集
             *  2   基本信息
             *  1   通知
             */
            notitype: {
                type: Number, //
                default: 1
            },
            infoid:''//查看详情或者是编辑普通通知时传入的id,如果id是空的话
        },
        data(){
            return{
                inMain: false,
                total:0,
                currentPage:1,
                size:30,
                token: Cookies.get('token'),
                type:Cookies.get('type'),
                percentageColor:'#409eff',
                isrenling:'',
                startTime:'',
                stopTime:'',
                renlingName:'',
                surveyRange:[],
                paperName:'',
                paperRange:'',
                updateList:[],
                attachment: [],//该条详情的附件
                //测试用表格数据
                dataList: [
                    {//数据包，字段名作为关键字，便于列的调整先后顺序
                        c1: "测试1",
                        c2: "123123123"
                    },
                    {
                        c1: "测试2",
                        c2: "7897899787"
                    },
                    {
                        c1: "测试3",
                        c2: "456456456"
                    }
                ]
            }
        },
        mounted:function(){
            this.getRenlingList();
        },

        methods: {
            getRenlingList() {
                let data = {
                    token: this.token,
                    page: this.currentPage,
                    size: this.pageSize,
                    orderby: {},
                };
                console.log("第二个" + this.infoid)
                API.adminRenlingList(data).then(res => {
                    this.paperName = res.list[this.infoid].name;
                    res.list[this.infoid].renlingRange.forEach(item => {
                        this.paperRange = this.paperRange + item.userInfo[0].name + ' ';
                    })
                    return res
                }).catch(msg => {
                    alert('操作失败')
                })
            },
            /**
             * 结束认领
             * */
            finishrenling(infoid) {
                let data = {
                    token: this.token,
                    renling_id: this.infoid,
                }
                API.finishRenling(data).then(res => {
                    if (res.code) {
                        alert(res.message);
                        return;
                    }
                    alert('结束认领！');
                    return res
                }).catch(msg => {
                    if (res.code) {
                        alert(res.message);
                        return;
                    }
                    alert(msg)
                })

            },
            /**
             * 保存编辑,论文列表还没写
             * */
            saveedit(infoid) {
                let renling_ids = []
                this.updateList.forEach(item => {
                    renling_ids.push(item.renling_id)
                })
                let attachment_id = []
                this.attachment.forEach(item1 => {
                    attachment_id.push(item1.url)
                })


                let data = {
                    token: this.token,
                    renling_id: this.infoid,
                    is_renling:this.isrenling,
                    start_timestamp:this.startTime,
                    stop_timestamp:this.stopTime,
                    survey_range:this.surveyRange,
                    name:this.renlingName,

                }
                API.saveEdit(data).then(res => {
                if (res == true) {
                    alert("保存成功！")
                    this.$router.push({path: `/paper/`})
                }
                else
                    alert("保存失败!")

                return res
                }).catch(msg => {
                    alert('Failed!')
                })


        },


                    /**
             * 结果导出
             * */
            resultout() {
                window.open(PRO.baseURL + 'renling/admin/export-renling?token=' + this.token + '&renling_id=' + this.infoid);
            },


            currentChange(val) {
                this.currentPage = val;
                this.getRenlingList();
            },
        }
    }
</script>

<style scoped>
    .titleDiv{
        background-color: #DDF1FF;
        padding: 10px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .filelabel{
        float: left;
        height: 30px;
    }
    .filelabel p{
        line-height: 30px;
        max-lines: 1;
        font-size: 16px;
        color:#5EBBDA ;
        text-align: center;
    }
    .display-row {
        display: -webkit-flex; /* Safari */
        -webkit-justify-content: flex-start; /* Safari 6.1+ */
        display: flex;
        justify-content: flex-start;
        width: 100%;
    }
    .row-left {
        width: 8%;
        text-align: left;
        min-width: 100px;
    }
    .row-right{
        width: 92%;
    }
    .titleinput {
        height: 40px;
        width:100%;
        margin-left: 5px;
        font-size: 16px;
    }
    .titleinput p {
        height: 40px;
        line-height: 30px;
        font-size: 16px;
    }
    .tableTitle{
        display: table-cell;
        font-size: 15px;
        padding: 5px;
        font-family: 黑体;
        font-weight: bold;
        color:gray;
        text-align: center;
        width: 50px;
        text-align: center;
        padding-left: 10px
    }
    .tableCell{
        display: table-cell;
        font-size: 15px;
        padding: 5px;
        text-align: center;
    }
    .outDiv {
        top: 70px;
        left: 150px;
        width: calc(100% - 150px);
        min-height: calc(100% - 70px);
        padding: 1.5rem 1.5rem 50px;
        background-color: white;
        height: 100%;
        overflow-y: auto;
        shadow:"never";
    }
    .paginaClass{
        display: flex;
        float: right;
        align-items: center;
        justify-content: space-between;
        margin-left: 5%;
        padding-bottom: 15px;
        padding-top: 10px
    }
    .grayLine{
        background-color: #e4efff;
    }
</style>
